import React, { useEffect, useState } from 'react'
import { RootState, useSelector } from '@/redux/index'
import { useLocation } from 'react-router-dom'
import { HOME_URL } from '@/config/config'
import { Breadcrumb } from 'antd'

const Bread = () => {
  const { pathname } = useLocation()
  const { menuList } = useSelector((state: RootState) => state.menu)
  const [items, setItems] = useState([{ title: '首页', href: 'home' }])
  useEffect(() => {
    getCurrentPath()
  }, [pathname])
  const getCurrentPath = () => {
    const arr = [] as any
    if (pathname === HOME_URL) arr.push({ title: '首页', key: HOME_URL })
    const path = pathname.slice(1)

    for (let i = 0; i < menuList.length; i++) {
      if (menuList[i].key === path) {
        arr.push([{ title: menuList[i].label, key: '/' + menuList[i].key }])
      } else {
        for (let j = 0; j < menuList[i].children.length; j++) {
          if (menuList[i].children[j].key === path) {
            arr.push(
              { title: menuList[i].label, path: '/' + menuList[i].key },
              { title: menuList[i].children[j].label, path: '/' + menuList[i].children[j].key }
            )
          }
        }
      }
    }
    setItems(arr)
  }
  return <Breadcrumb items={items} />
}

export default Bread
